<header class="am-topbar am-topbar-fixed-top" id="my-header">
    <div class="am-g">
        <div class="am-u-lg-10 am-u-lg-offset-1">
            <h1 class="am-topbar-brand">
                <a href="{:U('Home/Index/index')}">
                    <img style="height: 40px;width: auto" src="__PUBLIC__/Home/images/logo.png">
                </a>
            </h1>
            <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-secondary am-show-sm-only" data-am-collapse="{target: '#collapse-head'}">
                <span class="am-sr-only">导航切换</span>
                <span class="am-icon-bars"></span>
            </button>
            <div class="am-collapse am-topbar-collapse" id="collapse-head">
                <ul class="am-nav am-nav-pills am-topbar-nav">
                    <li>
                        <a href="{:U('Home/Index/index')}">最美沈城</a>
                    </li>
                    <volist name="_categoryNavList" id="nvo">
                        <li>
                            <a href="{:U('Home/Article/articleList',array('category_id'=>$nvo['category_id']))}">{$nvo['title']}</a>
                        </li>
                    </volist>
                    <if condition="org_user()">
                        <li>
                            <a href="{:U('Home/Article/myArticleList')}">我的文章</a>
                        </li>
                    </if>
                </ul>
                <if condition=" is_login() == false ">
                    <div class="am-topbar-right">
                        <button data-url="{:U('Home/User/register')}" class="use-button am-btn am-btn-secondary am-topbar-btn am-btn-sm"><span class="am-icon-pencil"></span> 注册</button>
                    </div>
                    <div class="am-topbar-right">
                        <button data-url="{:U('Home/User/login')}" class="use-button am-btn am-btn-primary am-topbar-btn am-btn-sm"><span class="am-icon-user"></span> 登录</button>
                    </div>
                    <else/>
                    <div class="am-topbar-right" style="padding-top: 2px">
                        <li class="am-dropdown" data-am-dropdown>
                            <img style="height: 45px;width: 45px;padding-top: 1px" src="{:get_head_picture()}">
                            <a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
                                {:get_nickname()} <span class="am-icon-caret-down"></span>
                            </a>
                            <ul class="am-dropdown-content" id="my-dropdown-content">
                                <li><a href="{:U('Home/User/set')}">设置</a></li>
                                <li><a id="logout" data-url="{:U('Home/User/logout')}" href="javascript:;">退出</a></li>
                            </ul>
                        </li>
                    </div>
                </if>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function(){
            var url;
            $('.use-button').click(function(){
                window.location.href = $(this).attr('data-url');
            });
            $('#logout').click(function(){
                url = $(this).attr('data-url');
                layer.confirm('你真的要退出吗？', {
                    btn: ['是的','再等会'], //按钮
                    shade: false //不显示遮罩
                }, function(){
                    window.location.href = url;
                }, function(){

                });
            });
        });
    </script>
</header>